import React from 'react';
import { Form, Input, Button, Row, Col, Steps, message } from 'antd';
import { useState } from 'react';
import { validateTel, sendCodeFn, validateTelCode, registerFn } from '../../api/user';

const { Step } = Steps;
const steps = [
  {
    title: '第一步',
    content: '输入手机号'
  },
  {
    title: '第二步',
    content: '输入验证码'
  },
  {
    title: '第三步',
    content: '输入密码'
  }
];
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 8 }
};

const telreg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
function RegisterUser() {
  const [tel, setTel] = useState('');
  const [telcode, setTelcode] = useState('');
  const [text, setText] = useState('发送短信验证码'); // *************************
  const [password, setPassword] = useState('');
  const [flag, setFlag] = useState(true);
  const [telcodeflag, setTelCodeFlag] = useState(false); // *************************

  const handlerTelChange = (e) => {
    setTel(e.target.value);
    // 正则验证手机号
    telreg.test(e.target.value) ? setFlag(false) : setFlag(true);
  };

  const handlerTelCodeChange = (e) => {
    // *************************
    setTelcode(e.target.value);
  };

  const handlerPasswordChange = (e) => {
    setPassword(e.target.value);
  };
  // 步骤条
  const [current, setCurrent] = React.useState(0);

  // 第一步点击下一步
  const handlerFirstClick = () => {
    validateTel({ tel }).then((res) => {
      if (res.data.code === '10001') {
        message.warning('该手机号已被注册');
      } else {
        localStorage.setItem('tel', tel);
        setCurrent(1);
      }
    });
  };

  const handlerSecondClick = () => {
    // 一定要校验验证码的正确性
    validateTelCode({
      tel,
      telcode
    }).then((res) => {
      console.log(res);
      if (res.data.code === '10002') {
        message.warning('验证码验证失败');
      } else {
        setCurrent(2);
      }
    });
  };

  const sendCode = () => {
    console.log(tel);
    let timer = null;
    let time = 10;
    timer = setInterval(() => {
      sendCodeFn({ tel }).then(() => {
        message.success('验证码已发送');
      });
      time--;
      setText(time + 's后重新发送');
      setTelCodeFlag(true);
      if (time <= 0) {
        clearInterval(timer);
        setText('发送短信验证码');
        setTelCodeFlag(false);
        time = 10;
      }
    }, 1000);
  };

  return (
    <>
      <Steps current={current}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} description={item.content} />
        ))}
      </Steps>
      <Form {...layout} name='basic'>
        {current === 0 && (
          <Form.Item
            label='手机号'
            name='tel'
            rules={[{ required: true, message: '请输入您的手机号' }]}
          >
            <Col span={24}>
              <Input onChange={handlerTelChange} maxLength={11} />
            </Col>
            <Button type='primary' disabled={flag} onClick={handlerFirstClick}>
              下一步
            </Button>
          </Form.Item>
        )}
        {current === 1 && (
          <Form.Item
            label='手机验证码'
            name='telcode'
            rules={[{ required: true, message: '请输入手机验证码' }]}
          >
            <Row>
              <Col span={16}>
                <Input onChange={handlerTelCodeChange} />
              </Col>
              <Col span={8}>
                {
                  // *************************
                }
                <Button type='dashed' onClick={sendCode} disabled={telcodeflag}>
                  {text}
                </Button>
              </Col>
              <Button type='primary' disabled={telcode.length === 0} onClick={handlerSecondClick}>
                下一步
              </Button>
            </Row>
          </Form.Item>
        )}
        {current === 2 && (
          <>
            <Form.Item
              label='密码'
              name='password'
              rules={[{ required: true, message: '请输您的密码' }]}
            >
              <Col span={24}>
                <Input.Password onChange={handlerPasswordChange} />
              </Col>
              <Button
                type='primary'
                disabled={password.length === 0}
                onClick={() => {
                  registerFn({
                    tel,
                    password
                  }).then(() => {
                    message.success('注册成功');
                  });
                }}
              >
                注册
              </Button>
            </Form.Item>
          </>
        )}
      </Form>
    </>
  );
}

export default RegisterUser;
